// out: ../css/

// 导入初始化样式
@import "base.less";

@vw: 3.75vw;

// 顶部
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: (44 / @vw);
  padding: 0 (12 / @vw) 0 (18 / @vw);
  .logo {
    height: (30 / @vw);
    width: (66 / @vw);
    img {
      width: 100%;
    }
  }
  .nav-right {
    width: (160 / @vw);
    height: (44 / @vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      height: (21 / @vw);
      width: (22 / @vw);
      color: #cecece;
    }
    span {
      width: (24 / @vw);
      height: (24 / @vw);
      font-size: (9 / @vw);
      font-weight: 600;
      color: #ff6699;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e7e7e7;
      border-radius: (12 / @vw);
    }
    p {
      width: (72 / @vw);
      background-color: #ff6699;
      height: (24 / @vw);
      font-size: (14 / @vw);
      color: #fff;
      padding: (2 / @vw) (5 / @vw);
      border-radius: (4 / @vw);
      text-align: center;
    }
  }
}
// 导航栏
.nav {
  width: 100%;
  height: (40 / @vw);
  position: relative;
  margin-bottom: (10 / @vw);
  ul {
    display: flex;
    align-items: center;
    height: 100%;
    .active {
      padding-top: (3 / @vw);
      line-height: (40 / @vw);
      span {
        border-bottom: (2 / @vw) solid #ff6699;
        color: #ff6699;
      }
    }
    li {
      width: (60 / @vw);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: (14 / @vw);
    }
  }
  .xia {
    z-index: 1;
    width: (40 / @vw);
    height: (22 / @vw);
    position: absolute;
    right: 0;
    top: (10 / @vw);
    background-color: white;
    text-align: center;
    img {
      width: (20 / @vw);
      height: (20 / @vw);
      padding: (3 / @vw);
    }
  }
}
// 列表
.list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 (5 / @vw);
  .item {
    width: (182 / @vw);
    height: (151 / @vw);
    padding: (8 / @vw) (5 / @vw);
    position: relative;
    img {
      width: (172 / @vw);
      height: (97 / @vw);
      border-radius: (4 / @vw);
    }
    .info {
      z-index: 2;
      height: (28 / @vw);
      width: (172 / @vw);
      position: absolute;
      bottom: (46 / @vw);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: (5 / @vw) (6 / @vw);
      background: linear-gradient(to bottom, transparent, rgba(7, 7, 7, 0.948));
      .left {
        width: (57 / @vw);
        height: (18 / @vw);
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: (16 / @vw);
          height: (16 / @vw);
          filter: brightness(0) invert(1);
        }
        span {
          font-size: (12 / @vw);
          color: white;
        }
      }
      .right {
        width: (42 / @vw);
        height: (18 / @vw);
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: (16 / @vw);
          height: (16 / @vw);
          filter: brightness(0) invert(1);
        }
        span {
          font-size: (12 / @vw);
          color: white;
        }
      }
    }
    .text {
      font-size: (12 / @vw);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
    }
  }
}
// 提示
.tip {
  z-index: 999;
  width: (351 / @vw);
  height: (37 / @vw);
  background-color: #ff6699;
  margin: 0 (10 / @vw);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: (18 / @vw);
  position: fixed;
  bottom: (40 / @vw);
  img {
    width: (35 / @vw);
    height: (17 / @vw);
    margin-right: (15 / @vw);
    filter: brightness(0) invert(1);
  }
  span {
    font-size: (14 / @vw);
    color: white;
  }
}
